<script lang="ts" setup>
import type { Flow01Item } from '@/api/designer/model'
import type { Flow01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderFlow01.less'

defineOptions({
  name: 'RenderFlow01',
})
const props = defineProps<{
  render: Flow01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
const renderedList = computed(() => {
  const result = {
    left: [] as Flow01Item[],
    right: [] as Flow01Item[],
  }
  const items = props.render.config.items ?? []
  if (platform.value === 'mobile' || items.length === 0) 
    return result
  const split = Math.ceil(items.length / 2)
  result.left.push(...items.slice(0, split))
  result.right.push(...items.slice(split))
  return result
})
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('main')">
      <div :class="prefix('flows')">
        <!-- item for loop -->
        <div v-for="item of render.config.items" :key="item.id" :class="prefix('flow')">
          <div :class="prefix('index')">
            {{ item.step }}
          </div>
          <div :class="prefix('content')">
            <div :class="prefix('title')">
              {{ item.title }}
            </div>
            <div :class="prefix('desc')">
              {{ item.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('main')">
      <div :class="prefix('flows-left')">
        <!-- item for loop -->
        <div v-for="item of renderedList.left" :key="item.id" :class="prefix('flow')">
          <div :class="prefix('index')">
            {{ item.step }}
          </div>
          <div :class="prefix('content')">
            <div :class="prefix('title')">
              {{ item.title }}
            </div>
            <div :class="prefix('desc')">
              {{ item.description }}
            </div>
          </div>
          <!-- 箭头 -->
          <div :class="prefix('arrow')" />
        </div>
      </div>
      <img :class="prefix('flows-seperator')" src="/images/flow01-seperator.png" :width="62" :height="238">
      <div :class="prefix('flows-right')">
        <!-- item for loop -->
        <div v-for="item of renderedList.right" :key="item.id" :class="prefix('flow')">
          <div :class="prefix('index')">
            {{ item.step }}
          </div>
          <div :class="prefix('content')">
            <div :class="prefix('title')">
              {{ item.title }}
            </div>
            <div :class="prefix('desc')">
              {{ item.description }}
            </div>
          </div>
          <!-- 箭头 -->
          <div :class="prefix('arrow')" />
        </div>
      </div>
    </div>
  </div>
</template>
